<script type="text/javascript">

function configureComponent() {
    rowid=$('#componentsTable').getGridParam("selrow");
    if (!rowid) {
            $("#dialog").data('title.dialog', "No row selected" );
            $("#dialog p").text("Please select a component to configure");
            $("#dialog").dialog('open');
            return;
    }
    document.location="/component-plugin/get-component-config-page/id/" + rowid;

}

function demoComponent() {
        rowid=$('#componentsTable').getGridParam("selrow");
    if (!rowid) {
            $("#dialog").data('title.dialog', "No row selected" );
            $("#dialog p").text("Please select a component to demonstrate");
            $("#dialog").dialog('open');
            return;
    }

	 $.post("/component-plugin/get-component-demo", { id: rowid},
		function(data) {
				$('#demodiv').html(data);
	 	}
			);
}

function removeComponent() {
    rowid=$('#componentsTable').getGridParam("selrow");
    if (!rowid) {
            $("#dialog").data('title.dialog', "No row selected" );
            $("#dialog p").text("Please select a component to remove");
            $("#dialog").dialog('open');
            return;
    }
    $("#are_you_sure_dialog").dialog('open');

}


$(document).ready(function() {

        $("#are_you_sure_dialog").dialog({
            bgiframe: true,
            modal: true,
            autoOpen: false,
            resizable: false,
            buttons: {
                Yes: function() {
                    rowid=$('#componentsTable').getGridParam("selrow");
                    name=$('#componentsTable').getCell(rowid, "name");
                    $.post('/component/remove-component/id/' + rowid + '/name/' + name,{},
                    function(data){
                        var myobj = eval('(' + data + ')');
                        $("#dialog").data('title.dialog', "Component Removal" );
                        $("#dialog p").text(myobj.message);
                        $("#dialog").dialog('open');
                        if (myobj.success == 1)
                            $("#componentsTable").trigger("reloadGrid");
                        return;
                    });

                    $(this).dialog('close');
                },
                No: function() {
                    $(this).dialog('close');
                }
            }
        });

        $("#dialog").dialog({
            bgiframe: true,
            modal: true,
            autoOpen: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });
   

    jQuery("#componentsTable").jqGrid({
           sortable: true,
           ajaxGridOptions : {type:"POST"},
           url:'/component/get-components-list',
           datatype: "json",
           colNames:['Id','Name','Version', 'Location', 'Min Height','Min Width','Timestamp'],
           colModel:[ {name:'id',index:'id', width:55},
               {name:'name',index:'name',width:150},
               {name:'version',index:'version', width:70},
               {name:'location',index:'location', width:150},
               {name:'min_height',index:'min_height', width:80},
               {name:'min_width',index:'min_width', width:80},
               {name:'timestamp',index:'timestamp', width:160}],
           rowNum:20,
           rowList:[10,20,30,40,50],
           imgpath: '/js/jqGrid/themes/<?=$this->jqGridTheme?>/images',
           pager: '#pager2',
           sortname: 'id',
           viewrecords: true,
           sortorder: "asc",
           editurl:'/component/set-components-list',
           caption:"Components List" }).
           navGrid('#pager2',{edit:false,add:false,del:false}).
           navButtonAdd('#pager2',{caption:'configure',title:'configure',position:'first',onClickButton: configureComponent}).
           navButtonAdd('#pager2',{caption:'demo',title:'run demo',position:'first',onClickButton: demoComponent}).
           navButtonAdd('#pager2',{caption:'',buttonicon:"ui-icon-trash",title:'Uninstall Component',position:'first',onClickButton: removeComponent});

});


</script>
<?require 'partial/tabs.phtml';?>
<hr/>
<table id="componentsTable" class="scroll" cellpadding="0" cellspacing="0">
</table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
<hr/>
<div id="demodiv"></div>
<hr/>
<div id="dialog" class="dialog" title="">
    <p>
    </p>
</div>
<div id="are_you_sure_dialog" class="dialog" title="notice">
    <p>
        Are you sure you want to delete this component?
    </p>
</div>

